<template>
  <div id="app" class="body">
    <!-- 首页 页面 -->
    <!-- 下拉刷新 -->
    <!-- 顶部导航栏 -->
    <div class="navigation">
      <ul class="u1">
        <li class="l1">
          <!-- 位置选择跳转未设置 -->
          <div >
            <span>郑州</span>
            <img class="logo" src="/gg_img/down.png" alt="" />
          </div>
        </li>
        <li class="l2">
          <input type="text" placeholder="目的地/电站名/功能" />
          <button class="a1">
            <!-- 搜索 跳转  搜索功能  未设置 -->
            <div @click="lianxi">
              <img src="/gg_img/sousuo.png" alt="" />
            </div>
          </button>
        </li>
        <li class="l3">
          <button class="b1">
            <!-- 客服跳转未设置 -->
            <div @click="lianxi">
              <img src="/gg_img/kefu.png" alt="" />
            </div>
          </button>

          <button>
            <!-- 聊天界面跳转未设置 -->
            <div @click="$router.push('/home/shequ')">
              <img src="/gg_img/massage.png" alt="" />
            </div>
          </button>
        </li>
      </ul>
    </div>
    <!-- 背景颜色 -->
    <div class="bc"></div>
    <!-- 轮播图 -->
    <div class="lunbo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="/lunbo_img/l1.jpg" alt="" /></van-swipe-item>
        <van-swipe-item @click="lunbo1">
          <img src="/lunbo_img/l2.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item @click="lunbo2"
          ><img src="/lunbo_img/l3.jpg" alt=""
        /></van-swipe-item>
        <van-swipe-item @click="lunbo3"
          ><img src="/lunbo_img/l4.jpg" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单图标 -->
    <van-grid clickable icon-size="20px" :border="false" :column-num="5">
      <!-- 搜索跳转未设置 -->
      <van-grid-item @click="lianxi" icon="/index_img/ss.png" text="搜索" />
      <!-- 收藏跳转未设置 -->
      <van-grid-item
        @click="$router.push('/shoucang')"
        icon="/index_img/collect.png"
        text="收藏"
      />
      <!-- 最近访问跳转未设置 -->
      <van-grid-item
        @click="lianxi"
        icon="/index_img/recently.png"
        text="最近访问"
      />
      <!-- 最近访问跳转未设置 -->
      <van-grid-item
        @click="$router.push('/amap')"
        icon="/index_img/navigation.png"
        text="一键导航"
      />
      <!-- 我的卡券跳转未设置 -->
      <van-grid-item
        @click="lianxi"
        icon="/index_img/kaquan.png"
        text="我的卡券"
      />
      <!-- 我的订单跳转未设置 -->
      <van-grid-item
        @click="lianxi"
        icon="/index_img/order.png"
        text="我的订单"
      />
      <!-- 会员跳转未设置 -->
      <van-grid-item @click="lianxi" icon="/index_img/member.png" text="会员" />
      <van-grid-item
        @click="lianxi"
        icon="/index_img/integral.png"
        text="积分商城"
      />
      <!-- 更多跳转未设置 -->
      <van-grid-item @click="lianxi" icon="/index_img/更多.png" text="更多" />
    </van-grid>
    <!-- 分界线 -->
    <div class="van-hairline--top"></div>
    <!-- 充电桩位置及内容 -->
    <!-- 充电桩位置及内容跳转未设置 -->
    <div @click="$router.push('/amap')">
      <div class="location">
        <p class="pc">10km内对外开放电站</p>
        <div class="z1">
          <div class="t1">
            <img src="/gg_img/waijing.jpg" alt="" />
          </div>
          <div class="t2">
            <img src="/gg_img/ditu.jpg" alt="" />
          </div>
        </div>
        <div class="z2">
          <ul class="u2">
            <li>
              <p class="p1">特来电郑州市都路红星美凯龙....413524165413546</p>
            </li>
            <li>
              <span class="s">4.2分</span>
              <span>最近充电</span> <span class="s">2小时前</span>
              <span class="min">特来电权益</span>
            </li>
            <li>
              <!-- <van-notice-bar
                class="notice-swipe"
                left-icon="volume-o"
                text="小特提醒:充电车辆需从东门进出,进场前在特来电APP绑定车牌号后,启动充电满30分钟免停1.5小时,充电不满20分钟或不充电免停20分钟。超时按现场计费标准收费"
              /> -->
            </li>
            <li><span class="max">1.3333</span><span>元/度</span></li>
            <li>
              <div class="p2">
                <img src="" />
                <span class="s1">停车收费, 以场地实际收费为标准, 请确认</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 广告 -->
    <!-- 充电套餐 -->
    <div class="g1">
      <!-- 套餐字段 -->
      <p class="pp1">充电服务费套餐<span>紧扣服务费</span></p>
      <div class="tc">
        <!-- 套餐内容 -->
        <div class="tc1">
          <p class="p1">服务套餐199度</p>
          <p class="p2">仅抵扣服务费</p>
          <p class="p3">¥<span>58</span>购</p>
        </div>
        <div class="tc1">
          <p class="p1">服务套餐809度</p>
          <p class="p2">仅抵扣服务费</p>
          <p class="p3">¥<span>228</span>购</p>
        </div>
      </div>
    </div>
    <!-- 7.9折抢先看 -->
    <div class="dz">
      <p class="dz1">7.9折抢先看<span>爱车安全防护报告,一年立省120</span></p>
      <div>
        <img class="dz2" src="/gg_img/g1.jpg" alt="" />
      </div>
    </div>
    <!-- 优惠券 -->
    <div class="yh">
      <p class="yh1">优惠购券 <span>全额充电抵扣充电服务费</span></p>
      <div class="yhh">
        <!-- 代金券1跳转未设置 -->
        <div class="yh2 yh3">
          <div @click="lianxi">
            <p class="yh21"><span>¥</span>100</p>
            <p class="yh22">代金券</p>
            <p class="yh23">¥99购<span>¥100</span></p>
          </div>
        </div>
        <div class="yh2 yh4">
          <!-- 代金券2跳转未设置 -->
          <div @click="lianxi">
            <p class="yh21"><span>¥</span>300</p>
            <p class="yh22">代金券</p>
            <p class="yh23">¥295购<span>¥300</span></p>
          </div>
        </div>
        <div class="yh2 yh5">
          <!-- 代金券3跳转未设置 -->
          <div @click="lianxi">
            <p class="yh21"><span>¥</span>1000</p>
            <p class="yh22">代金券</p>
            <p class="yh23">¥950购</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 充电桩热销 -->
    <div class="rx">
      <p class="wz">充电桩热销<span>必买好物</span></p>
      <div class="sp">
        <div class="sp1">
          <div @click="commodity">
            <p class="sp2"><span>销售冠军</span></p>
            <img src="/sp_img/s1.jpg" alt="" />
            <p class="js">便携式充电器</p>
            <s>¥1299</s>
            <p class="jg1">¥<span>999</span>起</p>
            <p class="jg2">¥<span>1995</span></p>
          </div>
        </div>

        <div class="sp1">
          <p class="sp3"><span>口碑好评</span></p>
          <img src="/sp_img/s2.jpg" alt="" />
          <p class="js">家庭交流桩</p>
          <s>¥2299</s>
          <p class="jg1">¥<span>2099</span>起</p>
          <p class="jg2">¥<span>1995</span></p>
        </div>
        <div class="sp1">
          <p class="sp4"><span>匠心巨制</span></p>
          <img src="/sp_img/s3.jpg" alt="" />
          <p class="js">商用快充桩</p>
          <s>¥26800</s>
          <p class="jg1">¥<span>25800</span>起</p>
          <p class="jg2">¥<span>24800</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    //空白地址
    lianxi() {
      this.$router.push("/lianxi");
    },
    lunbo1() {
      // 轮播1
      this.$router.push("/lunbo1");
    },
    lunbo2() {
      // 轮播2
      this.$router.push("/lunbo2");
    },
    lunbo3() {
      // 轮播2
      this.$router.push("/lunbo3");
    },
    commodity() {
      // 轮播2
      this.$router.push("/commodity");
    },
  },
};
</script>


<style lang="scss" scoped>
.body {
  margin: 0;
  padding: 0;
  width: 100%;
}
// 导航栏
.navigation {
  position: fixed;
  top: 0;
  z-index: 10;
  padding: 2px 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
}
.u1 {
  display: flex;
  height: 30px;
  button {
    border: 0;
  }
  .l1 {
    width: 22%;
    font-size: 15px;
    text-align: center;
    .logo {
      height: 25px;
      box-sizing: border-box;
      vertical-align: middle;
    }
  }
  .l2 {
    width: 69%;
    margin-left: 10px;
    .a1 {
      height: 30px;
      padding: 0 5% 0 0;
      border-radius: 0px 15px 15px 0px;
      vertical-align: middle;
      img {
        height: 30px;
        box-sizing: border-box;
      }
    }
    input {
      width: 70%;
      border: 0;
      padding-right: 0;
      padding-left: 5%;
      height: 28px;
      vertical-align: middle;
      background-color: #efefef;
      font-size: 14px;
      border-radius: 15px 0px 0px 15px;
    }
  }
  .l3 {
    width: 30%;
    button {
      margin-right: 2%;
      height: 30px;
      background: rgba(0, 0, 0, 0);
      img {
        box-sizing: border-box;
        height: 25px;
      }
    }
  }
}
// 背景图
.bc {
  width: 100%;
  height: 100px;
  background-color: pink;
  border-radius: 0 0 10% 10%;
  margin-bottom: 6%;
}
// 轮播图
.lunbo {
  position: absolute;
  top: 7%;
  left: 10%;
  width: 80%;
  height: 70px;
  background-color: #000;
  border-radius: 12px;
  overflow: hidden;
  .my-swipe .van-swipe-item {
    color: #fff;
    line-height: 70px;
    text-align: center;
    background-color: #39a9ed;
    img {
      display: inline-block;
      box-sizing: border-box;
      width: 100%;
      height: 70px;
    }
  }
}
// 充电桩位置内容
.location {
  width: 375px;
  display: flex;
  flex-wrap: wrap;
  // 头部文字
  .pc {
    font-weight: 600;
    width: 100%;
    font-size: 1.3rem;
    padding-left: 2%;
    margin: 10px 0;
  }
  // 图片
  .z1 {
    width: 30%;
    .t1 {
      margin: 2% 5%;
      img {
        box-sizing: border-box;
        margin-left: 4%;
        width: 90%;
        height: 50px;
      }
    }
    .t2 {
      width: 90%;
      height: 50px;
      margin: 2% 5%;
      img {
        width: 90%;
        height: 98%;
        margin-left: 4%;
      }
    }
  }
  .z2 {
    width: 70%;
    ul {
      li {
        margin-bottom: 2px;
        .notice-swipe {
          height: 20px;
          line-height: 20px;
        }
        .p1 {
          width: 90%;
          font-weight: 600;
          font-size: 1.1rem;
          margin: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .s {
          border-right: 1px solid #000;
        }
        .min {
          padding-left: 5px;
          color: red;
        }
        .max {
          font-size: 1.3rem;
          color: red;
          font-weight: 900;
        }
        span {
          display: inline-block;
          font-size: 0.1rem;
          padding-right: 5px;
        }
        .p2 {
          margin-top: 5px;
          margin-bottom: 0;
          .s1 {
            font-size: 0.1rem;
          }
        }
      }
    }
  }
}
// 广告
//套餐
.g1 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // 套餐字段
  p {
    padding: 0;
    margin: 0;
  }
  .pp1 {
    width: 100%;
    padding-left: 2%;
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 1%;
    span {
      display: inline-block;
      padding-left: 2%;
      font-size: 0.1rem;
      color: #858585;
    }
  }
  // 套餐内容
  .tc {
    display: flex;
    width: 100%;
    padding-left: 2%;
    .tc1 {
      padding: 2%;
      margin: 2%;
      border-radius: 8px;
      width: 40%;
      background: linear-gradient(to bottom right, #f2dbbc, #e3a96d);
      .p2 {
        font-size: 0.5rem;
        color: #b11c1c;
        margin-bottom: 4%;
      }
      .p3 {
        color: #b11c1c;
        font-size: 0.5rem;
        span {
          font-size: 1rem;
        }
      }
    }
  }
}
// 77.9折
.dz {
  width: 100%;
  // 字段
  .dz1 {
    width: 90%;
    padding-left: 2%;
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 1%;
    span {
      display: inline-block;
      padding-left: 2%;
      font-size: 0.1rem;
      color: #858585;
    }
  }
  // 图片
  div {
    margin: 2%;
    border-radius: 10px;
    overflow: hidden;
    .dz2 {
      box-sizing: border-box;
      width: 100%;
    }
  }
}
// 优惠券
.yh {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // padding-left: 2%;
  // 字段
  .yh1 {
    width: 100%;
    padding-left: 2%;
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 1%;
    span {
      display: inline-block;
      padding-left: 2%;
      font-size: 0.1rem;
      color: #858585;
    }
  }
  // 代金券
  .yhh {
    width: 100%;
    display: flex;

    .yh3 {
      background: linear-gradient(to bottom right, #f8d869, #fe8a35);
    }
    .yh4 {
      background: linear-gradient(to bottom right, #fe3931, #ff9f2f);
    }
    .yh5 {
      background: linear-gradient(to bottom right, #fe3931, #ff9f2f);
    }
    .yh2 {
      width: 27%;
      margin: 2%;
      border-radius: 10px;
      .yh21 {
        text-align: center;
        margin: 0;
        color: #fff;
        font-size: 1.5rem;
        span {
          color: #fff;
          font-size: 0.1rem;
        }
      }
      .yh22 {
        margin: 0 0 10% 0;
        text-align: center;
        color: #fff;
        border-bottom: 1px dashed #fff;
      }
      .yh23 {
        margin: 10% 0 0 0;
        text-align: center;
        font-size: 0.5rem;
        color: #fff;
        span {
          color: #000;
          text-decoration: line-through;
          font-size: 0.1rem;
          margin-left: 2%;
        }
      }
    }
  }
}
// 充电桩热销
.rx {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // 字段
  .wz {
    width: 100%;
    padding-left: 2%;
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 1%;
    span {
      display: inline-block;
      padding-left: 2%;
      font-size: 0.1rem;
      color: #858585;
    }
  }
  // 商品
  .sp {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    .sp1 {
      width: 30%;
      .js {
        margin: 2% 0;
      }
      s {
        font-size: 0.1rem;
        color: #858585;
      }
      .jg1 {
        margin: 5% 0;
        color: red;
        font-size: 0.1rem;
        span {
          font-size: 1rem;
        }
      }
      .jg2 {
        margin: 5% 0;
        font-size: 0.7rem;
      }
      .sp2,
      .sp3,
      .sp4 {
        font-size: 0.1rem;
        text-align: right;
        color: #fff;
        span {
          padding: 2px 4px;
          background: linear-gradient(to bottom right, #fe3931, #ff9f2f);
        }
      }
      .sp3 {
        span {
          background: linear-gradient(to bottom right, #2f89f8, #27bde7);
        }
      }
      .sp4 {
        span {
          background: linear-gradient(to bottom right, #e19a28, #e7b82a);
        }
      }
      img {
        width: 100%;
        height: 7rem;
      }
    }
  }
}
</style>